import Taro, { Component } from '@tarojs/taro';
import { View, RadioGroup, Radio, Label } from '@tarojs/components';
import { DModal } from '@/components/';
import { AtTextarea } from 'taro-ui'

import './index.scss';

export default class CheckOpinion extends Component {
  state = {
    checkOpinion: 'success',
    explain: '',
	isOpened:false
  }

  handleCheckChange = (e) => {
    this.setState({ checkOpinion: e.detail.value })
  }
  handleCancelMod = (e) => {
	this.setState({
		isOpened:false
	},()=>{
		  e&&this.props.onCancel()
	})
  }
  handleCancel = () => {
  	this.setState({
  		isOpened:true
  	})
  }
  handleConfirm = () => {
    this.props.onConfirm({ ...this.state })
  }
  handleChange(value, key) {
    this.setState({ [key]: value })
  }
  componentWillReceiveProps(props){
	  if(props.explain){
		this.setState({explain:props.explain})
	  }
	  if(props.checkOpinion){
		this.setState({checkOpinion:props.checkOpinion})
	  }
  }
  render() {
    const { opinions = [], title = '审批意见', label = '审批意见', type = '' } = this.props;
    const { checkOpinion, explain } = this.state

    return (
      <View className="check-opinion">
        <View className="check-opinion__form">
          <View className="title">{title}</View>
          <View className="opinion">
            <View className="label">{label}</View>
            <RadioGroup onChange={this.handleCheckChange}>
              {
                opinions.map(item => <Label>
                  <Radio value={item.value} checked={item.value === checkOpinion}></Radio> {item.name}
                </Label>)
              }
            </RadioGroup>
          </View>
          {
            (type === 'buy' && checkOpinion === 'fail' || type === '') && <View className="remark">
              <View className="remark_label">备注</View>
              <AtTextarea value={explain} onChange={(value) => this.handleChange(value, 'explain')}></AtTextarea>
            </View>
          }
        </View>

        <View className="buttons">
          <View className="btn btn--cancel" onClick={this.handleCancel}>取消</View>
          <View className="btn btn--submit" onClick={this.handleConfirm}>提交</View>
        </View>
		<DModal
		  isShow={this.state.isOpened}
		  title='提示'
		  onCancel={ this.handleCancelMod.bind(this) }
		  onFirst={ this.handleCancelMod.bind(this) }
		  onLast={ this.handleCancelMod.bind(this,true) }
		  text='是否取消审核'
		/>
      </View>
    )
  }
}

CheckOpinion.defaultProps = {
  onCancel: () => {},
  onConfirm: () => {}
}
